<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI dialog documentation</title>

	<style>
	body {
		font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"
	}
	.gutter {
		display: none;
	}
	</style>
</head>
<body>

<script>{
		"title":
			"Dialog Widget",
		"excerpt":
			"Open content in an interactive overlay.",
		"termSlugs": {
			"category": [
				"widgets"
			]
		}
	}</script><article id="dialog1" class="entry widget"><h2 class="section-title">
<span>Dialog Widget</span><span class="version-details">version added: 1.0</span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>Description: </strong>Open content in an interactive overlay.</p>
<section id="quick-nav"><header><h2>QuickNav<a href="#entry-examples">Examples</a>
</h2></header><div class="quick-nav-section">
<h3>Options</h3>
<div><a href="#option-appendTo">appendTo</a></div>
<div><a href="#option-autoOpen">autoOpen</a></div>
<div><a href="#option-buttons">buttons</a></div>
<div><a href="#option-closeOnEscape">closeOnEscape</a></div>
<div><a href="#option-closeText">closeText</a></div>
<div><a href="#option-dialogClass">dialogClass</a></div>
<div><a href="#option-draggable">draggable</a></div>
<div><a href="#option-height">height</a></div>
<div><a href="#option-hide">hide</a></div>
<div><a href="#option-maxHeight">maxHeight</a></div>
<div><a href="#option-maxWidth">maxWidth</a></div>
<div><a href="#option-minHeight">minHeight</a></div>
<div><a href="#option-minWidth">minWidth</a></div>
<div><a href="#option-modal">modal</a></div>
<div><a href="#option-position">position</a></div>
<div><a href="#option-resizable">resizable</a></div>
<div><a href="#option-show">show</a></div>
<div><a href="#option-title">title</a></div>
<div><a href="#option-width">width</a></div>
</div>
<div class="quick-nav-section">
<h3>Methods</h3>
<div><a href="#method-close">close</a></div>
<div><a href="#method-destroy">destroy</a></div>
<div><a href="#method-isOpen">isOpen</a></div>
<div><a href="#method-moveToTop">moveToTop</a></div>
<div><a href="#method-open">open</a></div>
<div><a href="#method-option">option</a></div>
<div><a href="#method-widget">widget</a></div>
<br/><h3>Extension Points</h3>
<div><a href="#method-_allowInteraction">_allowInteraction</a></div>
</div>
<div class="quick-nav-section">
<h3>Events</h3>
<div><a href="#event-beforeClose">beforeClose</a></div>
<div><a href="#event-close">close</a></div>
<div><a href="#event-create">create</a></div>
<div><a href="#event-drag">drag</a></div>
<div><a href="#event-dragStart">dragStart</a></div>
<div><a href="#event-dragStop">dragStop</a></div>
<div><a href="#event-focus">focus</a></div>
<div><a href="#event-open">open</a></div>
<div><a href="#event-resize">resize</a></div>
<div><a href="#event-resizeStart">resizeStart</a></div>
<div><a href="#event-resizeStop">resizeStop</a></div>
</div></section><div class="longdesc" id="entry-longdesc">
		<p>A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default.</p>

		<p>If the content length exceeds the maximum height, a scrollbar will automatically appear.</p>

		<p>A bottom button bar and semi-transparent modal overlay layer are common options that can be added.</p>

		<h3>Focus</h3>

		<p>Upon opening a dialog, focus is automatically moved to the first item that matches the following:</p>

		<ol>
			<li>The first element within the dialog with the <code>autofocus</code> attribute</li>
			<li>The first <a href="/tabbable-selector/"><code>:tabbable</code></a> element within the dialog's content</li>
			<li>The first <a href="/tabbable-selector/"><code>:tabbable</code></a> element within the dialog's buttonpane</li>
			<li>The dialog's close button</li>
			<li>The dialog itself</li>
		</ol>

		<p>While open, the dialog widget ensures that tabbing cycles focus between elements within the dialog itself, not elements outside of it. Modal dialogs additionally prevent mouse users from clicking on elements outside of the dialog.</p>

		<p>Upon closing a dialog, focus is automatically returned to the element that had focus when the dialog was opened.</p>

		<h3>Hiding the close button</h3>

		<p>In some cases, you may want to hide the close button, for instance, if you have a close button in the button pane. The best way to accomplish this is via CSS. As an example, you can define a simple rule, such as:</p>

		<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>.no-close .ui-dialog-titlebar-close {</code></div></div><div class="container"><div class="line"><code>  display: none;</code></div></div><div class="container"><div class="line"><code>}</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>


		<p>Then, you can simply add the <code>no-close</code> class to any dialog in order to hide its close button:</p>

		<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
						<div class="line n6">6</div>
					
						<div class="line n7">7</div>
					
						<div class="line n8">8</div>
					
						<div class="line n9">9</div>
					
						<div class="line n10">10</div>
					
						<div class="line n11">11</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">"#dialog"</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  dialogClass: <span class="string">"no-close"</span>,</code></div></div><div class="container"><div class="line"><code>  buttons: [</code></div></div><div class="container"><div class="line"><code>    {</code></div></div><div class="container"><div class="line"><code>      text: <span class="string">"OK"</span>,</code></div></div><div class="container"><div class="line"><code>      click: <span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code>        $( <span class="keyword">this</span> ).dialog( <span class="string">"close"</span> );</code></div></div><div class="container"><div class="line"><code>      }</code></div></div><div class="container"><div class="line"><code>    }</code></div></div><div class="container"><div class="line"><code>  ]</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>


		<div>
	<h3 id="theming">Theming</h3>

	<p>The dialog widget uses the <a href="/theming/css-framework/">jQuery UI CSS framework</a> to style its look and feel. If dialog specific styling is needed, the following CSS class names can be used:</p>
</div>

		<ul>
			<li>
				<code>ui-dialog</code>: The outer container of the dialog.
				<ul>
					<li>
						<code>ui-dialog-titlebar</code>: The title bar containing the dialog's title and close button.
						<ul>
							<li>
<code>ui-dialog-title</code>: The container around the textual title of the dialog.</li>
							<li>
<code>ui-dialog-titlebar-close</code>: The dialog's close button.</li>
						</ul>
					</li>
					<li>
<code>ui-dialog-content</code>: The container around the dialog's content. This is also the element the widget was instantiated with.</li>
					<li>
						<code>ui-dialog-buttonpane</code>: The pane that contains the dialog's buttons. This will only be present if the <a href="#option-buttons"><code>buttons</code></a> option is set.
						<ul>
							<li>
<code>ui-dialog-buttonset</code>: The container around the buttons themselves.</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>

		<p>Additionally, when the <a href="#option-modal"><code>modal</code></a> option is set, an element with a <code>ui-widget-overlay</code> class name is appended to the <code>&lt;body&gt;</code>.</p>

		<h3>Dependencies</h3>
		<ul>
			<li><a href="/category/ui-core/">UI Core</a></li>
			<li><a href="/jQuery.widget/">Widget Factory</a></li>
			<li><a href="/position/">Position</a></li>
			<li><a href="/button/">Button</a></li>
			<li>
<a href="/draggable/">Draggable</a> (optional; for use with the <a href="#option-draggable"><code>draggable</code></a> option)</li>
			<li>
<a href="/resizable/">Resizable</a> (optional; for use with the <a href="#option-resizable"><code>resizable</code></a> option)</li>
			<li>
<a href="/category/effects-core/">Effects Core</a> (optional; for use with the <a href="#option-show"><code>show</code></a> and <a href="#option-hide"><code>hide</code></a> options)</li>
		</ul>
	</div>
<h3>Additional Notes:</h3>
<div class="longdesc"><ul><li>
			This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.
		</li></ul></div>
<section id="options"><header><h2>Options</h2></header><div id="option-appendTo" class="api-item first-item">
<h3>appendTo<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Selector">Selector</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>"body"</code>
</div>
<div>
				<p>Which element the dialog (and overlay, if <a href="#option-modal">modal</a>) should be appended to.</p>
				<div class="warning">
<strong>Note:</strong> The <code>appendTo</code> option should not be changed while the dialog is open.</div>
			<span class="version-details"> (version added: 1.10.0)</span>
</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>appendTo</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ appendTo: <span class="string">"#someElem"</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>appendTo</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> appendTo = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"appendTo"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"appendTo"</span>, <span class="string">"#someElem"</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-autoOpen" class="api-item">
<h3>autoOpen<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>true</code>
</div>
<div>If set to <code>true</code>, the dialog will automatically open upon initialization. If <code>false</code>, the dialog will stay hidden until the <a href="#method-open"><code>open()</code></a> method is called.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>autoOpen</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ autoOpen: <span class="literal">false</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>autoOpen</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> autoOpen = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"autoOpen"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"autoOpen"</span>, <span class="literal">false</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-buttons" class="api-item">
<h3>buttons<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Object">Object</a> or <a href="http://api.jquery.com/Types/#Array">Array</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>{}</code>
</div>
<div>Specifies which buttons should be displayed on the dialog. The context of the callback is the dialog element; if you need access to the button, it is available as the target of the event object.</div>
<strong>Multiple types supported:</strong><ul>
<li>
<strong>Object</strong>: The keys are the button labels and the values are the callbacks for when the associated button is clicked.</li>
<li>
<strong>Array</strong>: Each element of the array must be an object defining the attributes, properties, and event handlers to set on the button.</li>
</ul>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>buttons</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ buttons: [ { text: <span class="string">"Ok"</span>, click: <span class="keyword">function</span>() { $( <span class="keyword">this</span> ).dialog( <span class="string">"close"</span> ); } } ] });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>buttons</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> buttons = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"buttons"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"buttons"</span>, [ { text: <span class="string">"Ok"</span>, click: <span class="keyword">function</span>() { $( <span class="keyword">this</span> ).dialog( <span class="string">"close"</span> ); } } ] );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-closeOnEscape" class="api-item">
<h3>closeOnEscape<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>true</code>
</div>
<div>Specifies whether the dialog should close when it has focus and the user presses the escape (ESC) key.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>closeOnEscape</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ closeOnEscape: <span class="literal">false</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>closeOnEscape</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> closeOnEscape = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"closeOnEscape"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"closeOnEscape"</span>, <span class="literal">false</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-closeText" class="api-item">
<h3>closeText<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#String">String</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>"close"</code>
</div>
<div>Specifies the text for the close button. Note that the close text is visibly hidden when using a standard theme.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>closeText</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ closeText: <span class="string">"hide"</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>closeText</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> closeText = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"closeText"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"closeText"</span>, <span class="string">"hide"</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-dialogClass" class="api-item">
<h3>dialogClass<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#String">String</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>""</code>
</div>
<div>The specified class name(s) will be added to the dialog, for additional theming.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>dialogClass</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ dialogClass: <span class="string">"alert"</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>dialogClass</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> dialogClass = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"dialogClass"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"dialogClass"</span>, <span class="string">"alert"</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-draggable" class="api-item">
<h3>draggable<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>true</code>
</div>
<div>If set to <code>true</code>, the dialog will be draggable by the title bar. Requires the <a href="/draggable/">jQuery UI Draggable widget</a> to be included.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>draggable</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ draggable: <span class="literal">false</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>draggable</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> draggable = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"draggable"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"draggable"</span>, <span class="literal">false</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-height" class="api-item">
<h3>height<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a> or <a href="http://api.jquery.com/Types/#String">String</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>"auto"</code>
</div>
<div>The height of the dialog.</div>
<strong>Multiple types supported:</strong><ul>
<li>
<strong>Number</strong>: The height in pixels.</li>
<li>
<strong>String</strong>: The only supported string value is <code>"auto"</code> which will allow the dialog height to adjust based on its content.</li>
</ul>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>height</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ height: <span class="number">400</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>height</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> height = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"height"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"height"</span>, <span class="number">400</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-hide" class="api-item">
<h3>hide<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a> or <a href="http://api.jquery.com/Types/#Number">Number</a> or <a href="http://api.jquery.com/Types/#String">String</a> or <a href="http://api.jquery.com/Types/#Object">Object</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>null</code>
</div>
<div>If and how to animate the hiding of the dialog.</div>
<strong>Multiple types supported:</strong><ul>
<li>
<strong>Boolean</strong>: 
			When set to <code>false</code>, no animation will be used and the dialog will be hidden immediately.
			When set to <code>true</code>, the dialog will fade out with the default duration and the default easing.
		</li>
<li>
<strong>Number</strong>: 
			The dialog will fade out with the specified duration and the default easing.
		</li>
<li>
<strong>String</strong>: 
			The dialog will be hidden using the specified effect.
			The value can either be the name of a built-in jQuery animation method, such as <code>"slideUp"</code>, or the name of a <a href="/category/effects/">jQuery UI effect</a>, such as <code>"fold"</code>.
			In either case the effect will be used with the default duration and the default easing.
		</li>
<li>
<strong>Object</strong>: If the value is an object, then <code>effect</code>, <code>delay</code>, <code>duration</code>, and <code>easing</code> properties may be provided. If the <code>effect</code> property contains the name of a jQuery method, then that method will be used; otherwise it is assumed to be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. If <code>duration</code> or <code>easing</code> is omitted, then the default values will be used. If <code>effect</code> is omitted, then <code>"fadeOut"</code> will be used. If <code>delay</code> is omitted, then no delay is used.</li>
</ul>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>hide</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ hide: { effect: <span class="string">"explode"</span>, duration: <span class="number">1000</span> } });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>hide</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> hide = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"hide"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"hide"</span>, { effect: <span class="string">"explode"</span>, duration: <span class="number">1000</span> } );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-maxHeight" class="api-item">
<h3>maxHeight<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>false</code>
</div>
<div>The maximum height to which the dialog can be resized, in pixels.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>maxHeight</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ maxHeight: <span class="number">600</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>maxHeight</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> maxHeight = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"maxHeight"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"maxHeight"</span>, <span class="number">600</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-maxWidth" class="api-item">
<h3>maxWidth<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>false</code>
</div>
<div>The maximum width to which the dialog can be resized, in pixels.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>maxWidth</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ maxWidth: <span class="number">600</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>maxWidth</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> maxWidth = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"maxWidth"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"maxWidth"</span>, <span class="number">600</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-minHeight" class="api-item">
<h3>minHeight<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>150</code>
</div>
<div>The minimum height to which the dialog can be resized, in pixels.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>minHeight</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ minHeight: <span class="number">200</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>minHeight</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> minHeight = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"minHeight"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"minHeight"</span>, <span class="number">200</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-minWidth" class="api-item">
<h3>minWidth<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>150</code>
</div>
<div>The minimum width to which the dialog can be resized, in pixels.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>minWidth</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ minWidth: <span class="number">200</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>minWidth</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> minWidth = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"minWidth"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"minWidth"</span>, <span class="number">200</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-modal" class="api-item">
<h3>modal<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>false</code>
</div>
<div>If set to <code>true</code>, the dialog will have modal behavior; other items on the page will be disabled, i.e., cannot be interacted with. Modal dialogs create an overlay below the dialog but above other page elements.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>modal</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ modal: <span class="literal">true</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>modal</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> modal = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"modal"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"modal"</span>, <span class="literal">true</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-position" class="api-item">
<h3>position<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Object">Object</a> or <a href="http://api.jquery.com/Types/#String">String</a> or <a href="http://api.jquery.com/Types/#Array">Array</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>{ my: "center", at: "center", of: window }</code>
</div>
<div>
				<p>Specifies where the dialog should be displayed. The dialog will handle collisions such that as much of the dialog is visible as possible.</p>
				<p><em>Note: The <code>String</code> and <code>Array</code> forms are deprecated.</em></p>
			</div>
<strong>Multiple types supported:</strong><ul>
<li>
<strong>Object</strong>: Identifies the position of the dialog when opened. The <code>of</code> option defaults to the window, but you can specify another element to position against. You can refer to the <a href="/position/">jQuery UI Position</a> utility for more details about the various options.</li>
<li>
<strong>String</strong>: A string representing the position within the viewport. Possible values: <code>"center"</code>, <code>"left"</code>, <code>"right"</code>, <code>"top"</code>, <code>"bottom"</code>.</li>
<li>
<strong>Array</strong>: An array containing an <em>x, y</em> coordinate pair in pixel offset from the top left corner of the viewport or the name of a possible string value.</li>
</ul>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>position</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ position: { my: <span class="string">"left top"</span>, at: <span class="string">"left bottom"</span>, of: button } });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>position</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> position = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"position"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"position"</span>, { my: <span class="string">"left top"</span>, at: <span class="string">"left bottom"</span>, of: button } );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-resizable" class="api-item">
<h3>resizable<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>true</code>
</div>
<div>If set to <code>true</code>, the dialog will be resizable. Requires the <a href="/resizable/">jQuery UI Resizable widget</a> to be included.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>resizable</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ resizable: <span class="literal">false</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>resizable</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> resizable = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"resizable"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"resizable"</span>, <span class="literal">false</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-show" class="api-item">
<h3>show<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a> or <a href="http://api.jquery.com/Types/#Number">Number</a> or <a href="http://api.jquery.com/Types/#String">String</a> or <a href="http://api.jquery.com/Types/#Object">Object</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>null</code>
</div>
<div>If and how to animate the showing of the dialog.</div>
<strong>Multiple types supported:</strong><ul>
<li>
<strong>Boolean</strong>: 
			When set to <code>false</code>, no animation will be used and the dialog will be shown immediately.
			When set to <code>true</code>, the dialog will fade in with the default duration and the default easing.
		</li>
<li>
<strong>Number</strong>: 
			The dialog will fade in with the specified duration and the default easing.
		</li>
<li>
<strong>String</strong>: 
			The dialog will be shown using the specified effect.
			The value can either be the name of a built-in jQuery animation method, such as <code>"slideDown"</code>, or the name of a <a href="/category/effects/">jQuery UI effect</a>, such as <code>"fold"</code>.
			In either case the effect will be used with the default duration and the default easing.
		</li>
<li>
<strong>Object</strong>: If the value is an object, then <code>effect</code>, <code>delay</code>, <code>duration</code>, and <code>easing</code> properties may be provided. If the <code>effect</code> property contains the name of a jQuery method, then that method will be used; otherwise it is assumed to be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. If <code>duration</code> or <code>easing</code> is omitted, then the default values will be used. If <code>effect</code> is omitted, then <code>"fadeIn"</code> will be used.  If <code>delay</code> is omitted, then no delay is used.</li>
</ul>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>show</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ show: { effect: <span class="string">"blind"</span>, duration: <span class="number">800</span> } });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>show</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> show = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"show"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"show"</span>, { effect: <span class="string">"blind"</span>, duration: <span class="number">800</span> } );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-title" class="api-item">
<h3>title<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#String">String</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>null</code>
</div>
<div>Specifies the title of the dialog. If the value is <code>null</code>, the <code>title</code> attribute on the dialog source element will be used.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>title</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ title: <span class="string">"Dialog Title"</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>title</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> title = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"title"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"title"</span>, <span class="string">"Dialog Title"</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-width" class="api-item">
<h3>width<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>300</code>
</div>
<div>The width of the dialog, in pixels.</div>
<strong>Code examples:</strong><p>Initialize the dialog with the <code>width</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({ width: <span class="number">500</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>width</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> width = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"width"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"width"</span>, <span class="number">500</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div></section><section id="methods"><header><h2>Methods</h2></header><div id="method-close"><div class="api-item first-item">
<h3>close()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
</h3>
<div>Closes the dialog.</div>
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the close method:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"close"</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div></div>
<div id="method-destroy"><div class="api-item">
<h3>destroy()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
</h3>
<div>
		Removes the dialog functionality completely. This will return the element back to its pre-init state.
	</div>
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the destroy method:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"destroy"</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div></div>
<div id="method-isOpen"><div class="api-item">
<h3>isOpen()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#Boolean">Boolean</a></span>
</h3>
<div>Whether the dialog is currently open.</div>
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the isOpen method:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="keyword">var</span> isOpen = $( <span class="string">".selector"</span> ).dialog( <span class="string">"isOpen"</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div></div>
<div id="method-moveToTop"><div class="api-item">
<h3>moveToTop()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
</h3>
<div>Moves the dialog to the top of the dialog stack.</div>
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the moveToTop method:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"moveToTop"</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div></div>
<div id="method-open"><div class="api-item">
<h3>open()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
</h3>
<div>Opens the dialog.</div>
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the open method:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"open"</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div></div>
<div id="method-option">
<div class="api-item">
<h3>option( optionName )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#Object">Object</a></span>
</h3>
<div>Gets the value currently associated with the specified <code>optionName</code>.</div>
<ul><li>
<div><strong>optionName</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#String">String</a>
</div>
<div>The name of the option to get.</div>
</li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the  method:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="keyword">var</span> isDisabled = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"disabled"</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
<div class="api-item">
<h3>option()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#PlainObject">PlainObject</a></span>
</h3>
<div>Gets an object containing key/value pairs representing the current dialog options hash.</div>
<ul><li><div class="null-signature">This signature does not accept any arguments.</div></li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the  method:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="keyword">var</span> options = $( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
<div class="api-item">
<h3>option( optionName, value )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
</h3>
<div>Sets the value of the dialog option associated with the specified <code>optionName</code>.</div>
<ul>
<li>
<div><strong>optionName</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#String">String</a>
</div>
<div>The name of the option to set.</div>
</li>
<li>
<div><strong>value</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>A value to set for the option.</div>
</li>
</ul>
<div>
<strong>Code examples:</strong><p>Invoke the  method:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, <span class="string">"disabled"</span>, <span class="literal">true</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
<div class="api-item">
<h3>option( options )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
</h3>
<div>Sets one or more options for the dialog.</div>
<ul><li>
<div><strong>options</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>A map of option-value pairs to set.</div>
</li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the  method:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog( <span class="string">"option"</span>, { disabled: <span class="literal">true</span> } );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
</div>
<div id="method-widget"><div class="api-item">
<h3>widget()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a></span>
</h3>
<div>
		Returns a <code>jQuery</code> object containing the generated wrapper.
	</div>
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the widget method:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="keyword">var</span> widget = $( <span class="string">".selector"</span> ).dialog( <span class="string">"widget"</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div></div></section><section id="extension-points"><header><h2>Extension Points</h2></header><p>
				The dialog widget is built with the
				<a href="http://api.jqueryui.com/jQuery.widget/">widget factory</a> and can be
				extended. When extending widgets, you have the ability to override or add to the
				behavior of existing methods. The following methods are provided as extension points
				with the same API stability as the <a href="#methods">plugin methods</a> listed
				above. For more information on widget extensions, see
				<a href="http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/">Extending
				Widgets with the Widget Factory</a>.
			</p>
<hr/>
<div id="method-_allowInteraction"><div class="api-item first-item">
<h3>_allowInteraction( event )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#Boolean">Boolean</a></span>
</h3>
<div>
				Modal dialogs do not allow users to interact with elements behind the dialog. This can be problematic for elements that are not children of the dialog, but are absolutely positioned to appear as though they are. The <code>_allowInteraction()</code> method determines whether the user should be allowed to interact with a given target element; therefore, it can be used to whitelist elements that are not children of the dialog but you want users to be able to use.
			</div>
<ul><li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li></ul>
<div>
<strong>Code examples:</strong><p>Allow the Select2 plugin to be used within modal dialogs. The <a href="/jquery.widget/#method-_super"><code>_super()</code></a> call ensures elements within the dialog can still be interacted with.</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>_allowInteraction: <span class="keyword">function</span>( event ) {</code></div></div><div class="container"><div class="line"><code>  <span class="keyword">return</span> !!$( event.target ).is( <span class="string">".select2-input"</span> ) || <span class="keyword">this</span>._super( event );</code></div></div><div class="container"><div class="line"><code>}</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div></div></section><section id="events"><header><h2>Events</h2></header><div id="event-beforeClose" class="api-item first-item">
<h3>beforeClose( event, ui )<span class="returns">Type: <code>dialogbeforeclose</code></span>
</h3>
<div>Triggered when a dialog is about to close. If canceled, the dialog will not close.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
</li>
</ul>
<p><em>Note: The <code>ui</code> object is empty but included for consistency with other events.</em></p>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the beforeClose callback specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  beforeClose: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Bind an event listener to the dialogbeforeclose event:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"dialogbeforeclose"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
<div id="event-close" class="api-item">
<h3>close( event, ui )<span class="returns">Type: <code>dialogclose</code></span>
</h3>
<div>Triggered when the dialog is closed.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
</li>
</ul>
<p><em>Note: The <code>ui</code> object is empty but included for consistency with other events.</em></p>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the close callback specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  close: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Bind an event listener to the dialogclose event:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"dialogclose"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
<div id="event-create" class="api-item">
<h3>create( event, ui )<span class="returns">Type: <code>dialogcreate</code></span>
</h3>
<div>
		Triggered when the dialog is created.
	</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
</li>
</ul>
<p><em>Note: The <code>ui</code> object is empty but included for consistency with other events.</em></p>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the create callback specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  create: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Bind an event listener to the dialogcreate event:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"dialogcreate"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
<div id="event-drag" class="api-item">
<h3>drag( event, ui )<span class="returns">Type: <code>dialogdrag</code></span>
</h3>
<div>Triggered while the dialog is being dragged.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
<ul>
<li>
<div><strong>position</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current CSS position of the dialog.</div>
</li>
<li>
<div><strong>offset</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current offset position of the dialog.</div>
</li>
</ul>
</li>
</ul>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the drag callback specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  drag: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Bind an event listener to the dialogdrag event:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"dialogdrag"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
<div id="event-dragStart" class="api-item">
<h3>dragStart( event, ui )<span class="returns">Type: <code>dialogdragstart</code></span>
</h3>
<div>Triggered when the user starts dragging the dialog.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
<ul>
<li>
<div><strong>position</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current CSS position of the dialog.</div>
</li>
<li>
<div><strong>offset</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current offset position of the dialog.</div>
</li>
</ul>
</li>
</ul>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the dragStart callback specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  dragStart: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Bind an event listener to the dialogdragstart event:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"dialogdragstart"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
<div id="event-dragStop" class="api-item">
<h3>dragStop( event, ui )<span class="returns">Type: <code>dialogdragstop</code></span>
</h3>
<div>Triggered after the dialog has been dragged.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
<ul>
<li>
<div><strong>position</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current CSS position of the dialog.</div>
</li>
<li>
<div><strong>offset</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current offset position of the dialog.</div>
</li>
</ul>
</li>
</ul>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the dragStop callback specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  dragStop: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Bind an event listener to the dialogdragstop event:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"dialogdragstop"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
<div id="event-focus" class="api-item">
<h3>focus( event, ui )<span class="returns">Type: <code>dialogfocus</code></span>
</h3>
<div>Triggered when the dialog gains focus.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
</li>
</ul>
<p><em>Note: The <code>ui</code> object is empty but included for consistency with other events.</em></p>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the focus callback specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  focus: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Bind an event listener to the dialogfocus event:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"dialogfocus"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
<div id="event-open" class="api-item">
<h3>open( event, ui )<span class="returns">Type: <code>dialogopen</code></span>
</h3>
<div>Triggered when the dialog is opened.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
</li>
</ul>
<p><em>Note: The <code>ui</code> object is empty but included for consistency with other events.</em></p>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the open callback specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  open: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Bind an event listener to the dialogopen event:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"dialogopen"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
<div id="event-resize" class="api-item">
<h3>resize( event, ui )<span class="returns">Type: <code>dialogresize</code></span>
</h3>
<div>Triggered while the dialog is being resized.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
<ul>
<li>
<div><strong>originalPosition</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The CSS position of the dialog prior to being resized.</div>
</li>
<li>
<div><strong>position</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current CSS position of the dialog.</div>
</li>
<li>
<div><strong>originalSize</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The size of the dialog prior to being resized.</div>
</li>
<li>
<div><strong>size</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current size of the dialog.</div>
</li>
</ul>
</li>
</ul>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the resize callback specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  resize: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Bind an event listener to the dialogresize event:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"dialogresize"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
<div id="event-resizeStart" class="api-item">
<h3>resizeStart( event, ui )<span class="returns">Type: <code>dialogresizestart</code></span>
</h3>
<div>Triggered when the user starts resizing the dialog.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
<ul>
<li>
<div><strong>originalPosition</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The CSS position of the dialog prior to being resized.</div>
</li>
<li>
<div><strong>position</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current CSS position of the dialog.</div>
</li>
<li>
<div><strong>originalSize</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The size of the dialog prior to being resized.</div>
</li>
<li>
<div><strong>size</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current size of the dialog.</div>
</li>
</ul>
</li>
</ul>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the resizeStart callback specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  resizeStart: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Bind an event listener to the dialogresizestart event:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"dialogresizestart"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
<div id="event-resizeStop" class="api-item">
<h3>resizeStop( event, ui )<span class="returns">Type: <code>dialogresizestop</code></span>
</h3>
<div>Triggered after the dialog has been resized.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
<ul>
<li>
<div><strong>originalPosition</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The CSS position of the dialog prior to being resized.</div>
</li>
<li>
<div><strong>position</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current CSS position of the dialog.</div>
</li>
<li>
<div><strong>originalSize</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The size of the dialog prior to being resized.</div>
</li>
<li>
<div><strong>size</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>The current size of the dialog.</div>
</li>
</ul>
</li>
</ul>
<div>
<strong>Code examples:</strong><p>Initialize the dialog with the resizeStop callback specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).dialog({</code></div></div><div class="container"><div class="line"><code>  resizeStop: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Bind an event listener to the dialogresizestop event:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"dialogresizestop"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div></section><section class="entry-examples" id="entry-examples"><header><h2>Example:</h2></header><div class="entry-example" id="example-0">
<h4><span class="desc">A simple jQuery UI Dialog</span></h4>
<div class="syntaxhighlighter xml ">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
						<div class="line n6">6</div>
					
						<div class="line n7">7</div>
					
						<div class="line n8">8</div>
					
						<div class="line n9">9</div>
					
						<div class="line n10">10</div>
					
						<div class="line n11">11</div>
					
						<div class="line n12">12</div>
					
						<div class="line n13">13</div>
					
						<div class="line n14">14</div>
					
						<div class="line n15">15</div>
					
						<div class="line n16">16</div>
					
						<div class="line n17">17</div>
					
						<div class="line n18">18</div>
					
						<div class="line n19">19</div>
					
						<div class="line n20">20</div>
					
						<div class="line n21">21</div>
					
						<div class="line n22">22</div>
					
						<div class="line n23">23</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!doctype html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span> <span class="attribute">lang</span>=<span class="value">"en"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">meta</span> <span class="attribute">charset</span>=<span class="value">"utf-8"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">title</span>&gt;</span>dialog demo<span class="tag">&lt;/<span class="title">title</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">link</span> <span class="attribute">rel</span>=<span class="value">"stylesheet"</span> <span class="attribute">href</span>=<span class="value">"//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"//code.jquery.com/jquery-1.10.2.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"//code.jquery.com/ui/1.10.4/jquery-ui.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">button</span> <span class="attribute">id</span>=<span class="value">"opener"</span>&gt;</span>open the dialog<span class="tag">&lt;/<span class="title">button</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"dialog"</span> <span class="attribute">title</span>=<span class="value">"Dialog Title"</span>&gt;</span>I'm a dialog<span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">"#dialog"</span> ).dialog({ autoOpen: <span class="literal">false</span> });</code></div></div><div class="container"><div class="line"><code>$( <span class="string">"#opener"</span> ).click(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code>  $( <span class="string">"#dialog"</span> ).dialog( <span class="string">"open"</span> );</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div></section>
</div></article>

</body>
</html>
